<!DOCTYPE html>
<html lang="en" font-size="16px">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词云</title>
    <style type="text/css">
        html * {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .main-box {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .main-content-box {
            flex: 1;
            display: flex;
            flex-direction: row;
        }

        .content-left {
            flex: 3;
            padding: 1rem;
            border-right: 0.1rem gray solid;
        }

        .content-left-keyword-search {
            width: 100%;
            padding-top: 0.5rem;
            display: flex;
            flex-direction: row;
        }

        .content-left-keyword-search input {
            font-size: 1rem;
        }

        .content-left-keyword-search .box-search {
            flex: 3.5;
            outline: none;
            border: 0.1rem solid #70f3ff;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            margin-right: 0.5rem;
        }

        .btn-search {
            flex: 1.5;
            padding: 0.2rem;
            border: 0.1rem solid #70f3ff;
            border-radius: 0.5rem;
            background: none;
        }

        .content-left-participle-box {
            width: 100%;
            padding-top: 1rem;
        }

        .content-left-participle-box textarea {
            width: 100%;
            min-height: 4rem;
            border: 0.1rem solid black;
        }

        .content-left-participle-box button {
            margin-top: 0.5rem;
            min-width: 7rem;
        }

        .content-right {
            flex: 7;
            padding: 1rem;
        }

        #canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="main-box">
        <!-- set a title bar for the future -->
        <div class="main-title"></div>
        <!-- main content to show -->
        <div class="main-content-box">
            <div class="content-left">
                <div class="content-left-keyword-box">
                    <p>关键词用","或空格分割，自动搜索包含关键词得词汇进行展示，分词输入框可以输出长文本自动分词，按[] 键放大缩小界面</p>
                    <div class="content-left-keyword-search">
                        <input class="box-search" type="text" id="keyword" placeholder="请输入关键字（可用，分隔）">
                        <input class="btn-search" type="button" id="getkeyWord" value="获取关键词" />
                        <input class="btn-search" type="button" id="getSimWord" value="查找相似词" />
                        <input class="btn-search" type="button" id="getWordCount" value="词向量计算" />
                    </div>
                </div>

                <div class="content-left-participle-box">
                    <textarea id="text"></textarea>
                    <button id="btn" class="btn-search">分词并显示</button>
                </div>
            </div>

        </div>
        <div class="content-right">
            <canvas id="canvas"></canvas>
        </div>
        <!-- set the copyright -->
        <div class="main-copyright"></div>
    </div>

    <script src="word.Canvas.js"></script>
    <script src="./main.js"></script>
</body>

</html>